<template>
	<el-dialog title="审核用户" :visible.sync="visible" append-to-body width="480px">
		<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-width="90px" class="user_audit_wrapper">
			<el-form-item label="用户角色" prop="role">
				<el-select v-model="formData.role" placeholder="请选择用户角色" popper-class="user_role_select">
					<el-option-group v-for="(group, index) in roleGroupData" :key="index" :label="group.label">
						<el-option v-for="item in group.children" :key="item.value" :label="item.name" :value="item.id"></el-option>
					</el-option-group>
				</el-select>
			</el-form-item>
			<el-form-item label="单位类型" prop="filed3">
				<el-select v-model="formData.filed3" placeholder="请选择单位类型">
					<el-option v-for="(item, index) in dictEnums['DEPART_TYPE']" :key="index" :label="item.content" :value="item.content"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="单位属性" prop="filed4">
				<el-select v-model="formData.filed4" placeholder="请选择单位属性">
					<el-option v-for="(item, index) in dictEnums['DEPART_ATTRS']" :key="index" :label="item.content" :value="item.content"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleSubmitAudit()">通过</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { auditUser } from '@/api/system/tbSysUser';
import { getRoleList } from '@/api/system/tbSysRole';
export default {
	props: {
		value: { type: Boolean, default: false },
		userId: String
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			btnLoading: false,
			roleListData: [],
			roleGroupData: [],
			formData: {},
			formRules: {
				role: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
				filed3: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
				filed4: [{ required: true, message: '请选择单位属性', trigger: 'change' }]
			}
		};
	},
	computed: {
		...mapGetters(['dictEnums'])
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.getRoleData();
		},
		roleListData(arr) {
			this.roleGroupData = this.dictEnums['ROLE_TYPE'].map((item) => {
				let typeRoleArr = arr.filter((n) => n.type === item.value);
				let checkedRoleArr = typeRoleArr.filter((n) => !!n.checked).map((n) => n.id);
				return { label: item.msg, value: item.value, children: typeRoleArr };
			});
		}
	},
	methods: {
		//获取角色数据
		async getRoleData() {
			let params = { page: 1, limit: 9999 };
			let result = await getRoleList(params).then((res) => res.data);
			if (result.code === '0') {
				this.roleListData = !result.data ? [] : result.data;
			}
		},

		handleSubmitAudit() {
			this.$refs['form'].validate(async (valid) => {
				if (!valid) return false;
				this.btnLoading = true;
				await this.auditUserRequest();
				this.btnLoading = false;
			});
		},

		//格式化申请请求参数
		formatRequestParams() {
			let params = this.$lodash.cloneDeep(this.formData);
			params['id'] = this.userId;
			params['del'] = '1';
			params['proleList'] = [{ relId: params.role, operType: '1' }];
			return params;
		},

		//审核用户请求
		async auditUserRequest() {
			let params = this.formatRequestParams();
			let result = await auditUser(params).then((res) => res.data);
			if (result.code === '0') {
				this.visible = false;
				this.$emit('refresh');
				this.$showCustomMessage('success', `审核用户成功`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.user_audit_wrapper::v-deep {
	flex: 1;
	padding: 10px 10px 0 0;
	.el-select {
		width: 100%;
	}
}
</style>
<style lang="scss">
.user_role_select {
	.el-select-group__title {
		font-size: 14px;
		font-weight: bold;
		color: #303133;
	}
}
</style>
